<template>
  <div>
    <div class="app-member-center">
      <section class="app-main">
        <div class="member-header">
          <span class="user-img"><img :src="userImg"></span>
          <div class="user-info">
            <span class="user-title" v-text="userName"></span>
            <span class="user-mendian" v-text="storeName"></span>
          </div>
          <!--<span class="store-code">KJ8475</span>-->
        </div>
        <div class="member-content">
          <!--<mt-cell class="member-item" title="公司资料" is-link to="/build-tips">-->
            <!--<span class="iconfont icon-shezhi" slot="icon" style="background: #63bd65"></span>-->
          <!--</mt-cell>-->
          <mt-cell v-if="isAdmin==true || isShopKeeper==true" class="member-item" title="用户/部门管理" is-link to="/store-add-user">
            <span class="iconfont icon-tuandui" slot="icon" style="background: #c34853"></span>
          </mt-cell>
          <mt-cell v-if="storeType=='3501' && isAdmin==true" class="member-item" title="汽玻派派余额" is-link to="/store-money">
            <span class="iconfont icon-ic_xunjia" slot="icon" style="background: #3175fb"></span>
          </mt-cell>
          <mt-cell v-if="isAdmin==false" class="member-item" title="计件工资" is-link to="/my-money">
            <span class="iconfont icon-ic_xunjia" slot="icon" style="background: #3175fb"></span>
          </mt-cell>

          <!--<mt-cell class="member-item" title="在线查询" is-link to="/app-carmodel-search">-->
          <!--</mt-cell>-->
          <!--<mt-cell class="member-item" title="3c查询" is-link to="/app-3c-search">-->
            <!--<span class="iconfont icon-info-query" slot="icon" style="background: #3175fb"></span>-->

          <!--</mt-cell>-->
        </div>
          <div class="member-content">

          <!--<mt-cell class="member-item" title="汽车玻璃" is-link to="/report-center">-->
            <!--<span class="iconfont icon-webicon05" slot="icon" style="background: #63bd65"></span>-->
          <!--</mt-cell>-->

          <!--<mt-cell class="member-item" title="财务管理" is-link to="/build-tips">-->
            <!--<span class="iconfont icon-ic_xunjia" slot="icon" style="background: #3175fb"></span>-->
          <!--</mt-cell>-->
          <!--<mt-cell class="member-item" title="应收应付" is-link to="/build-tips">-->
            <!--<span class="iconfont icon-qianbao" slot="icon" style="background: #c6872d"></span>-->
          <!--</mt-cell>-->
          <!--<mt-cell class="member-item" title="帮助文档" is-link to="/build-tips">-->
            <!--<span class="iconfont icon-bangzhu" slot="icon" style="background:#63bd65"></span>-->
          <!--</mt-cell>-->
        </div>
        <div class="member-content">

          <mt-cell class="member-item" title="消息设置" is-link>
            <span class="iconfont icon-xiaoxi" slot="icon" style="background:#c6872d"></span>
          </mt-cell>
          <mt-cell class="member-item" title="系统设置" is-link to="/setting">
            <span class="iconfont icon-shezhi" slot="icon" style="background:#007EE5"></span>
          </mt-cell>
        </div>
      </section>
    </div>

    <footerNav v-bind:current="1"></footerNav>
  </div>
</template>

<script>
  import { Header,Cell } from 'mint-ui';
  import footerNav from '../../common/footer-nav.vue';
  export default{
    components:{
      footerNav
    },
    data () {
      return {
        userRole:'',
        userImg:'./static/img/user-none.jpg',
        userName:'',
        storeName:'',
        storeType:'',
        isAdmin:false,
        isShopKeeper:false,
      }
    },

    mounted(){
      this.storeType=sessionStorage.getItem('storeType');
      this.storeName=sessionStorage.getItem('currentName');
      this.userName=sessionStorage.getItem('userName');

      if(sessionStorage.getItem('isAdmin')=='0101'){
        this.isAdmin=true;
      }else if(sessionStorage.getItem('isShopKeeper')=='0101'){
        this.isShopKeeper=true;
      }
    },
    methods:{}
  }
</script>

<style lang="scss">

  .app-member-center{
    background: #f5f5f5;
    .app-main{
      padding:0 0 62px;
    }
    .member-header {
      background: -webkit-linear-gradient(right, #03adf3 , #0080e5); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(left, #03adf3 , #0080e5); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(left, #03adf3 , #0080e5); /* Firefox 3.6 - 15 */
      background: linear-gradient(to left, #03adf3 , #0080e5); /* 标准的语法 */
      position: relative;
      margin: 0 0 12px;
      padding:20px 16px;
    }
    .store-code{
      position: absolute;
      top:50%;
      right:16px;
      font-size:28px ;
      color: #fff;
      font-weight: bold;
      transform: translate(0,-50%);
    }
    .user-img {
      display: inline-block;
      vertical-align: middle;
      img {
        width:60px;
        height:60px;
        border:2px solid #fff
      }
    }
    .user-info {
      display: inline-block;
      vertical-align: middle;
      padding-left:8px;
    }
    .user-title {
      display: block;
      margin: 0 0 2px;
      font-size:16px;
      color:#fff
    }
    .user-mendian {
      display: block;
      font-size:14px;
      color: #fff;
    }
    .member-content{
      margin:0 0 16px;
    }
    .member-item{
      .mint-cell-text{
        font-size: 15px;
      }
      .item-tips{
        font-size: 15px;
      }
      .iconfont{
        background: #c34853;
        display: inline-block;
        width:22px;
        height: 22px;
        margin-right:5px;
        border-radius: 3px;
        color: #fff;
        font-size:15px;
        text-align: center;
        line-height: 22px;
      }
    }
  }
</style>
